<!-- 开始页面 -->
<template>
	<div id="search_start">
		<div class="search_content_box">
			<!-- 热门搜索 -->
			<div class="hot_search_box">
				<p>热门搜索</p>
				<div class="hot_search">
					<p 
					v-for="(item,idx) in hot_search" 
					:key="idx" 
					@click="start_set_val(item.first),toResult(item.first)"
					>
					{{item.first}}
					</p>
				</div>
			</div>
			<!-- 历史搜索 -->
			<div class="history_search_box" v-if="list.length > 0">
				<p>搜索历史</p>
				<div class="history_search" v-for="item in list" :key="item.time">
					<van-icon name="search" color="#ccc" size="18" />
					<div class="right">
						<p @click="toResult(item.val),start_set_val(item.val)">{{item.val}}</p>
						<van-icon name="close" color="#ccc" size="18" 
						@click="delItem(item.time)"/>
					</div>
				</div>
			</div>
		
		</div>
	</div>
</template>

<script>
	import { api } from "@/assets/http/api.js"
	import { mapMutations, mapState } from "vuex"
	
	export default{
		data(){
			return {
				hot_search:""
			}
		},
		async created(){
			let res = await this.$axios(api.get_hot_list);
			this.hot_search = res.data.result.hots;
		},
		computed:{
			...mapState({
				list: state => state.searchModule.history_search_list,
			}),
		},
		methods:{
			...mapMutations(["set_val","remove_history_search"]),
			start_set_val(val){
				this.set_val(val);
			},
			toResult(keyword) {
				this.$router.push({
					path:"/search/result",
					query:{
						songName:keyword
					}
				})
			},
			delItem(time){
				this.remove_history_search(time);
			}
		},
	}
</script>

<style lang="scss">
* {
	box-sizing: border-box;
	// letter-spacing: 2px;
}

// 热门搜索,历史搜索标题
.hot_search_box,
.history_search_box {
	> p {
		text-align: left;
		margin: 15px 0 0 10px;
		font-size: 13px;
		color: #666;
	}
}

// 热门搜索内容
.hot_search {
	margin: 10px 5px 20px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	> p {
		font-size: 15px;
		border: 1px solid #ddd;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		margin: 5px;
		border-radius: 15px;
	}
}

// 历史搜索内容
.history_search {
	margin: 15px 10px;
	height: 40px;
	line-height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	.right {
		width: calc(100vw - 46px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		> p {
			max-width: 80vw;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}

</style>
